// 系统用户
<template>
  <div class="app-container">
  <el-card class="box-card" shadow="never" style="border:0px;">
      <div slot="header" style="color:#303133;font-size:14px;font-weight:bold;">
        <span>系统用户</span>
      </div>
    <div class="filter-container" id="searchBox">
      <div class="left">
        <el-form :inline="true" class="demo-form-inline" size="medium" label-position="right">
          <el-form-item label="姓名：">
            <el-input v-model="listQuery.displayName" clearable class="filter-item" placeholder="请输入姓名" />
          </el-form-item>
          <el-form-item label="手机号：">
            <el-input v-model="listQuery.phone" clearable class="filter-item" placeholder="请输入手机号" />
          </el-form-item>
          <el-form-item label="角色：">
            <el-select v-model="listQuery.roleId" clearable  placeholder="选择角色"  style="width:100%">
              <el-option
                v-for="(item, index) in roles"
                :key="index"
                :label="item.displayName"
                :value="item.id"
                @click.native="listByPage()"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="所属机构：">
            <el-select v-model="listQuery.orgId" @change="orgSelectHandle" clearable  placeholder="所属机构" style="width:100%">
              <el-option
                v-for="(item, index) in orgList"
                :key="index"
                :label="item.orgName"
                :value="item.id"
                @click.native="listByPage()"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="所属部门：">
            <el-select v-model="listQuery.deptId" clearable  placeholder="所属部门" style="width:100%">
              <el-option
                v-for="(item, index) in effectiveDeptTree"
                :key="index"
                :label="item.deptName"
                :value="item.id"
                @click.native="listByPage()"
              />
            </el-select>
          </el-form-item>

        </el-form>
      </div>
     <div class="right">
        <el-button type="primary" @click="listByPage()">查询</el-button>
            <el-button  @click="resetListQueryForm()">重置</el-button>
        <el-button  type="text" @click="closeSearch">{{showOperation}}<i :class="[!showAll? 'el-icon-caret-bottom' : 'el-icon-caret-top']"></i>
               </el-button>
      </div>
    </div>

    <vxe-toolbar ref="xToolbar">
         <template #buttons>
            <el-button type="text"  icon="el-icon-plus"  @click="openAddModel('modalAddForm')">新增员工</el-button>
            <el-button type="text"  icon="el-icon-upload2" @click="openImportModel('modalAddForm')">导入用户</el-button>
        </template>
    </vxe-toolbar>
    <vxe-table
      v-loading="loading"
      :data="queryData"
      border="none"
      highlight-hover-row
      show-header-overflow
      show-overflow
      align="center"
      :header-cell-style="{ background: '#F7F7F8', color: '#606266' }"
      @cell-dblclick="cellDblclick"
    >
      <vxe-table-column type="index" min-width="50" title="序号"></vxe-table-column>
      <vxe-table-column title="姓名" field="displayName"  min-width="80" />
      <vxe-table-column title="手机号" field="phone" min-width="120" />
      <vxe-table-column title="邮箱" field="email"  min-width="150"/>
      <vxe-table-column title="角色" field="roleName"  min-width="140"/>
      <vxe-table-column title="账号状态" field="accountStatus" min-width="80">
        <template slot-scope="scope">
           <span>
              <span>
                <i
                  class="smallCircle"
                  :class="[
                    scope.row.accountStatus =='1' ? 'text_active' : 'text_noActive'
                  ]"
                />{{ scope.row.accountStatus =='1' ? '启用' : '禁用' }}
              </span>
            </span>
        </template>
      </vxe-table-column>
      <vxe-table-column title="所属部门" field="deptName"  min-width="120"/>
      <vxe-table-column title="所属机构" field="orgName"  min-width="150"/>
      <vxe-table-column title="职位" field="position"  min-width="80"/>
      <vxe-table-column title="创建时间" field="createTime"  min-width="150"/>
      <vxe-table-column fixed="right" width="180" title="操作">
        <template v-slot="{ row }">
          <el-button  type="text"  @click="openUpdateModel(row)">编辑</el-button>
          <el-divider direction="vertical"></el-divider>
          <el-button  type="text"  @click="openAssignPermissionModel(row.id,row.displayName)">权限配置</el-button>
          <el-divider direction="vertical"></el-divider>
          <el-button  type="text"  @click="enableUser(row)" v-if="row.accountStatus === '0'">启用</el-button>
          <el-button  type="text"  @click="disableUser(row)" v-if="row.accountStatus === '1'">禁用</el-button>
        </template>
      </vxe-table-column>
    </vxe-table>

    <!--  新增用户 -->
    <vxe-modal v-model="modalAdd.show" width="700" :title="'新增用户'" class="addModal">
      <el-form :model="modalAddForm" title-align="left" ref="modalAddForm" label-width="100px" style="width:80%;margin-top:10px;">
        <el-form-item label="姓名" prop="displayName"  :rules="[{ required: true, message: '姓名不能为空' }]">
          <el-input v-model="modalAddForm.displayName" placeholder="请输入姓名" clearable ></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone"  :rules="[{ required: true, message: '手机号不能为空' }]">
          <el-input v-model="modalAddForm.phone" placeholder="请输入手机号" clearable ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email"  :rules="[{ required: true, message: '邮箱不能为空'},
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}]">
          <el-input v-model="modalAddForm.email" placeholder="请输入邮箱" clearable ></el-input>
        </el-form-item>
        <el-form-item label="所属机构" prop="orgId" :rules="[{ required: true, message: '请选择机构' , trigger: 'change'}]">
          <el-select v-model="modalAddForm.orgId" @change="orgSelectHandle" placeholder="请选择所属机构" clearable  style="width:100%">
            <el-option v-for="(item, index) in orgList" :key="index" :label="item.orgName" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="所属部门" prop="deptId" >
          <el-select v-model="modalAddForm.deptId" placeholder="请选择所属部门" clearable  style="width:100%">
            <el-option v-for="(item, index) in effectiveDeptTree" :key="index" :label="item.deptName" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="用户角色"  prop="roleIds"  v-if="modalAddForm.id == undefined"  :rules="[{ required: true, message: '请选择角色' , trigger: 'change'}]">
          <el-select v-model="modalAddForm.roleIds"  placeholder="请选择用户角色" clearable  style="width:100%"  multiple>
            <el-option v-for="item in roles" :key="item.id" :label="item.displayName" :value="item.id"/>
          </el-select>
        </el-form-item>

        <el-form-item label="职位"  prop="position" v-if="ifCheckUser">
          <el-select v-model="modalAddForm.position" placeholder="请选择职位" clearable  style="width:100%" >
            <el-option v-for="(item, index) in positions" :key="index" :label="item.displayName" :value="item.displayName" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="insertUser('modalAddForm')" >提交</el-button>
          <el-button @click="cancel('modalAddForm')" >取消</el-button>
        </el-form-item>
      </el-form>
    </vxe-modal>

    <!--  编辑用户 -->
    <vxe-modal v-model="modalUpdate.show" width="700px" :title="'编辑'" class="addModal">
      <el-form :model="modalUpdateForm" title-align="left" ref="modalUpdateForm" label-width="100px" style="width:80%;margin-top:10px;">
        <el-form-item label="姓名" prop="displayName" >
          <el-input v-model="modalUpdateForm.displayName" placeholder="请输入姓名" clearable ></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone" >
          <el-input v-model="modalUpdateForm.phone" placeholder="请输入手机号" clearable ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email"  :rules="[{ required: true, message: '邮箱不能为空'},
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}]">
          <el-input v-model="modalUpdateForm.email" placeholder="请输入邮箱" clearable ></el-input>
        </el-form-item>
        <el-form-item label="所属机构" prop="orgId" :rules="[{ required: true, message: '请选择机构' , trigger: 'change'}]">
          <el-select v-model="modalUpdateForm.orgId" @change="orgSelectHandle" placeholder="请选择所属机构" clearable  style="width:100%">
            <el-option v-for="(item, index) in orgList" :key="index" :label="item.orgName" :value="item.id" />
          </el-select>
        </el-form-item>

        <el-form-item label="所属部门" prop="deptId" >
          <el-select v-model="modalUpdateForm.deptId" placeholder="请选择所属部门" clearable  style="width:100%">
            <el-option v-for="(item, index) in effectiveDeptTree" :key="index" :label="item.deptName" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="用户角色"  prop=""  :rules="[{ required: true, message: '请选择角色' , trigger: 'change'}]">
          <el-select v-model="roleIds" placeholder="请选择用户角色"  clearable  multiple    @change="roleChangeHandle" style="width:100%">
            <el-option v-for="(item, index) in roles" :key="index" :label="item.displayName" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="职位"  prop="posinion" v-if="ifCheckUser">
          <el-select v-model="modalUpdateForm.position" clearable  placeholder="请选择用户角色" style="width:100%">
            <el-option v-for="(item, index) in positions" :key="index" :label="item.displayName" :value="item.displayName" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="updateUser('modalUpdateForm')" >提交</el-button>
          <el-button @click="cancel('modalUpdateForm')">取消</el-button>
        </el-form-item>
      </el-form>
    </vxe-modal>
  </el-card>
    <vxe-pager
      class="pager"
      @page-change="changePage"
      :current-page.sync="listQuery.pageNo"
      :page-size.sync="listQuery.pageSize"
      :total="total"
      :page-sizes="[10, 30, 50, 100]"
      :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
    >
    </vxe-pager>

    <!-- 导入用户 -->
     <vxe-modal v-model="modalImport.show" width="700px" height="400px" :title="'上传文件'">
            <el-form :model="modalUpdateForm" title-align="right" title-width="100" ref="modalUpdateForm">
          <el-upload
          style="margin-top:30px;"
          class="upload-demo"
          drag
          :http-request="handleUpload"
          action="#"
          :limit="1"
          :on-exceed="handleUploadLimit"
          accept=".xlsx,.xls"
          multiple
          :file-list="fileList">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <!-- <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> -->
        </el-upload>

        <el-form-item label-width="70%">
          <el-button type="primary" @click="importUser" >确定</el-button>
          <el-button  @click="modalImport.show = false" >取消</el-button>
        </el-form-item>
      </el-form>

    </vxe-modal>

        <!-- :title="'权限配置'" -->
    <vxe-modal
      v-model="assignPermission.show"
      width="60%"
      height="60%"
      :title="perSittleTitle"
      :position="{left: 400}"
    >
        <el-tree
          :data="assignPermissionData"
          :default-checked-keys="assignPermissionCheckedData"
          show-checkbox
          node-key="id"
          ref="tree"
          highlight-current
          accordion
          :props="defaultProps">
        </el-tree>

        <div class="buttons submit-permission-button">
          <el-button type="primary" @click="saveAssignPermission">保存</el-button>
          <el-button @click="cancelAssignPermissionModel()">取消</el-button>
        </div>
    </vxe-modal>
  </el-card>
    <vxe-pager
      class="pager"
      @page-change="changePage"
      :current-page.sync="listQuery.pageNo"
      :page-size.sync="listQuery.pageSize"
      :total="total"
      :page-sizes="[10, 30, 50,100]"
      :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
    >
    </vxe-pager>
  </div>
</template>

<script>
import { listByPage, insertUser,updateUser,queryDictByName,importUser} from '@/api/user';
import { listRoles,listTree,getPermissionByUserId,saveAssignPermissionUser } from '@/api/role';
import { allOrg } from '@/api/org';
import { deptDistinct,disableOrEnableAccount,effectiveDeptDistinct} from '@/api/dept';
export default {
  name: 'User',
  data: function () {
    return {
      active: 0,
      queryData: [],
      total: 0,
      listQuery: {
        pageNo: 1,
        pageSize: 10,
        displayName: undefined,
        phone: undefined,
        deptId: undefined,
        roleId: undefined,
        orgId: undefined
      },
      loading: true,
      deptTree: [],
      effectiveDeptTree: [],
      roles: [],
      orgList:[],
      positions: [],
      fileList: [],
      dialogImportVisible: false,
      item: undefined,
      modalAddForm: {
        displayName: undefined,
        phone: undefined,
        email: undefined,
        roleIds: undefined,
        roleId: undefined,
        orgId: undefined,
        deptId: undefined,
        position: undefined,
      },
      modalAdd: {
        show: false
      },
      modalUpdateForm: {
        displayName: undefined,
        phone: undefined,
        orgId: undefined,
        email: undefined,
        roleIds: undefined,
        position: undefined,
      },
       modalUpdate: {
        show: false
      },
       modalImport: {
        show: false
      },
      roleIds: [],
      deptId: undefined,
      ifCheckUser: false,
      showAll:true,
      perSittleTitle: undefined,
      assignPermission: {
        show: false
      },
      assignPermissionData: [],
      assignPermissionCheckedData: [],
      assignPermissionParam: {
        perIds: undefined,
        roleId: undefined
      },
      orgId: undefined,
      loading: true,
      defaultProps: {
          children: 'children',
          label: 'displayName',
          value: 'id'

      }
    };
  },
  computed: {
    showOperation: function() {
   if (this.showAll == false) {
    //对文字进行处理
    return "展开";
   } else {
    return "收起";
   }
  }
  },
  mounted(){
  /**
   * 收起搜索
   */
  this.$nextTick(function() {
  //  this.closeSearch();
  });
  },
  created () {
    this.listByPage();
    this.listRoles();
    this.listOrgs();
    this.queryDictByName();
  },

  methods: {
    changePage() {
      this.listByPage();
    },

    queryDictByName() {
      queryDictByName("职位").then((data) => {
        this.positions = data.data;
      });
    },
    closeSearch() {
   this.showAll = !this.showAll;
   var searchBoxHeght = document.getElementById("searchBox");
   if (this.showAll == false) {
    searchBoxHeght.style.height = 50 + "px";
   } else {
    searchBoxHeght.style.height = "auto";
   }
  },
    clickUser(e) {
      this.ifCheckUser = false;
      this.roles.find((item)=>{//这里的userList就是上面遍历的数据源
          for(var i = 0;i<e.length;i++){
            if(item.id === e[i]){
              if(item.displayName === '审批岗'){
                this.ifCheckUser = true;
                return;
              }
            }
          }
      });
      if(this.ifCheckUser == false){
        this.modalAddForm.position = undefined;
      }
    },

    getRoles(e) {
      this.roleIds = [];
      this.roles.find((item)=>{//这里的userList就是上面遍历的数据源
          for(var i = 0;i<e.length;i++){
            if(item.displayName === e[i] || item.id === e[i]){
              this.roleIds.push(item.id);
            }
          }
      });
    },

    // 判断如果用户角色包含审批岗 则必填
    validateRoleContainsCheck(roleIds,position) {
      var flag = false;
      this.roles.find((item)=>{//这里的userList就是上面遍历的数据源
          for(var i = 0;i<roleIds.length;i++){
            if(item.id === roleIds[i]){
              if(item.displayName === '审批岗'){
                if (position === undefined) {
                    flag = true;
                    break;
                }
              }
            }
          }
      });
      return flag;
    },

    // 打开新增窗口
    openAddModel(modalAddForm) {
      this.ifCheckUser = true;
      this.modalAdd.show = true;
      this.restForm(modalAddForm);
      this.queryDictByName();
    },
        // 打开新增窗口
    openImportModel() {
      this.modalImport.show = true;
      this.fileList = []
      this.item = undefined
    },
    handleUpload(item){

      this.item = item
    },
    handleUploadLimit(){
        this.$message.error("仅可以上传一个文件");
    },
    importUser() {
          if( this.item === undefined ) {
                  this.$message.error("请选择文件")
                  return false
                }
           var formData = new FormData()
          formData.append('file', this.item.file)
          importUser(formData)
            .then(response => {
                this.$notify.success({
                title: '成功',
                message: '导入成功'
              })
              this.modalImport.show = false
              this.listByPage()

            })
            .catch(response => {
            })
    },
    // 打开权限配置窗口
    openAssignPermissionModel(userId,userName) {
      this.perSittleTitle = userName+"权限配置";
      this.assignPermission.show = true;
      getPermissionByUserId(userId).then((data) => {
        this.assignPermissionCheckedData = data.data;
      });

     listTree(this.listQuery).then((data) => {
        // var data1 = data.data.children;
        // this.foreachTree(data.data,IDArr);
        this.assignPermissionData = data.data.children;
      });
      this.assignPermissionParam.id = userId;
    },
    // 关闭权限配置窗口
    cancelAssignPermissionModel() {
      this.resetModal;
      this.assignPermission.show = false;
    },

    // 保存权限
    saveAssignPermission() {
      this.loading = true;
      //选中的子节点 getCheckedKeys不要给true值，否则获取全选的节点没有父节点
      let selectRecordsChildren = this.$refs.tree.getCheckedKeys()
      console.log(selectRecordsChildren)
      //选中子节点的父节点 （只能获取半选状态的父节点ID）
      let selectRecordsParent = this.$refs.tree.getHalfCheckedKeys()
      let selectRecords =  selectRecordsChildren.concat(selectRecordsParent)
      console.log(selectRecords)
      this.assignPermissionParam.sysPermissions = selectRecords;
      saveAssignPermissionUser(this.assignPermissionParam).then((data) => {
        this.$notify.success({title: '成功',message: '操作成功',});
        this.cancelAssignPermissionModel();
        this.queryList();
      }).catch(() => {
        this.loading = false;
      })
    },
    // 打开编辑窗口
    openUpdateModel(row) {
      this.roleIds = [],
      this.modalUpdate.show = true;
      this.modalUpdateForm = row;
      if (row.roleName != undefined){
        var roleNames = row.roleName.split(',');
        for(var i = 0;i<roleNames.length;i++){
          this.roleIds.push(roleNames[i]);
        }
      }
      if( row.roleName === '审批岗'){
        this.ifCheckUser = true
      }
      this.deptId = row.deptId;
    },
    //  启用账号
    enableUser(row) {
      row.accountStatus = "1";
      this.disableOrEnableAccount(row);
    },
    //  禁用账号
    disableUser(row) {
      row.accountStatus = "0";
      this.disableOrEnableAccount(row);
    },

    // 禁用或启用账号
    disableOrEnableAccount(param) {
      disableOrEnableAccount(param).then((data) => {
        if( param.accountStatus === '1') {
          this.$notify.success({title: '成功',message: '启用成功',});
        }else{
          this.$notify.success({title: '成功',message: '禁用成功',});
        }
        this.listByPage();
      });
    },

    cancel() {
      this.modalAdd.show = false;
      this.modalUpdate.show = false;
    },


    fresh(modalAddForm) {
      this.roleIds = [],
      this.modalAdd.show = false;
      this.modalUpdate.show = false;
      this.restForm(modalAddForm);
      this.listByPage();
    },
    deptDistinct() {
      deptDistinct().then((data) => {
        this.deptTree = data.data;
      });
    },
    effectiveDeptDistinct() {
      effectiveDeptDistinct({orgId: this.orgId}).then((data) => {
        this.effectiveDeptTree = data.data;
      });
    },
    // 查询所有角色
    listRoles() {
      listRoles().then((data) => {
        this.roles = data.data;
      });
    },
    // 查询所有机构
    listOrgs() {
      allOrg().then((data) => {
        this.orgList = data.data;
      });
    },
    roleChangeHandle(id){
      console.log(id)
      console.log(this.roleIds)
      if(this.roleIds.length == 0) {
        this.$message.info("至少选择一个角色")
        return false
      }
    },
    // 新增或编辑
    insertUser(modalAddForm) {
      this.$refs[modalAddForm].validate((valid) => {
        if (valid) {
          // 校验
          if (this.modalAddForm.phone==undefined || this.modalAddForm.phone.length>11) {
            this.$message.error('请输入正确的手机号码');
            return;
          }
          var flag = this.validateRoleContainsCheck(this.modalAddForm.roleIds,this.modalAddForm.position);
          if(flag){
            this.$message.error('职位必填！');
            return false;
          }
          insertUser(this.modalAddForm).then((data) => {
             this.$notify.success({title: '成功',message: '操作成功',});
            this.fresh(modalAddForm);
          });
        } else {
          return false;
        }
      });
    },

    // 编辑
    updateUser(modalUpdateForm) {
      this.$refs[modalUpdateForm].validate((valid) => {
        if (valid) {
          // 校验
          if (!(/^1[345789]\d{9}$/.test(this.modalUpdateForm.phone))) {
            this.$message.error('请输入正确的手机号码');
            return;
          }
          this.getRoles(this.roleIds);
          this.modalUpdateForm.roleIds=this.roleIds;
          updateUser(this.modalUpdateForm).then((data) => {
            this.$notify.success({title: '成功',message: '操作成功',});
            this.listByPage();
            this.fresh(modalUpdateForm);
          });
        } else {
          return false;
        }
      });
    },
    orgSelectHandle(orgId){
      this.orgId = orgId
      this.listQuery.deptId = undefined
      console.log(orgId)
      this.effectiveDeptDistinct()
    },
    listByPage() {
      this.loading = true;
      listByPage(this.listQuery).then((data) => {
        this.queryData = data.data;
        this.total = data.total;
        console.log('响应数据:%o', data);
        this.loading = false;
      });
    },

    restForm(formName) {
      // 1 置空查询条件
      this.listQuery = {
        pageNo: 1,
        pageSize: 10,
        displayName: undefined,
        phone: undefined,
        deptId: undefined,
        roleId: undefined,
         orgId: undefined
      };
      // 2 置空表单
      this.$refs[formName].resetFields()
    },

    resetListQueryForm(){
      this.listQuery = {
        pageNo: 1,
        pageSize: 10,
        displayName: undefined,
        phone: undefined,
        deptId: undefined,
        roleId: undefined,
        orgId: undefined
      };
      this.listByPage();
    },

    getUpdateFormParams(row) {
      this.modalAddForm = {
        deptName: row.deptName,
        id: row.id,
      };
    },
    cellDblclick({row,rowIndex,column,columnIndex,cell},event) {
      let _this = this;
      this.$copyText(event.target.innerText).then(function() {
        _this.$message.info('复制成功');
      });
    }
  },
};
</script>
<style lang="scss">
  .addModal{
    .el-form-item__error {
      padding-top: 0;
      line-height: 0.7;
    }
  }

</style>

<style lang="css" scoped>
.filter-container {
  display: flex;
  justify-content: space-between;
}

.pager{
  position: fixed;
  bottom: 0;
  right: 28px;
  background-color: #FAFAFB;
  z-index: 2;
  height: 40px;
  width: calc(100% - 260px);
  }

.submit-permission-button{
    position: fixed;
    bottom: 25%;
    right: 25%;
  }

.right >>> .el-button--primary,.el-button--default {
  padding: 10px 20px;
}

.vxe-table--render-default >>> .el-button--text{
  color: #2b7bfb;
}
.app-container >>> .vxe-table--render-default,.vxe-pager {
  font-family: PingFangSC, Arial, Helvetica, sans-serif;
}

.left {
  flex: 14;
  display: flex;
  flex-flow: row wrap;
  margin-right: 20px;
}
.left >>> .el-form {
  width: 100%;
}
.left >>> .el-form .el-form-item {
  display: flex;
  flex-flow: row nowrap;
  width: 30%;
  margin-right: 3%;
  float: left;
  margin-bottom: 14px;
}

.left >>> .el-form .el-form-item .el-form-item__label {
  font-weight: 500;
  color: #606266;
  text-align: left;
  /* flex: 1; */
}

.left >>> .el-form .el-form-item .el-form-item__content {
  flex: 1;
  /*超出部分隐藏*/
  text-overflow: ellipsis;
  /* 超出部分显示省略号 */
  white-space: nowrap;
  /*规定段落中的文本不进行换行 */
  width: 100%;
}
.date_item {
  width: 100%;
}
.right {
  flex: 2;
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-end;
  margin-right: 30px;
}
</style>
